{extend name='common/content' /}

{block name="content"}

<div id="e3" style="height: 800%"></div>

<script type="text/javascript">
var dom3 = document.getElementById("e3");
var myChart3 = echarts.init(dom3);
var app = {};

var xData3 = <?php echo json_encode($xData3);?>;
var yData3 = <?php echo json_encode($yData);?>;
var data3 = <?php echo json_encode($dData);?>;

option3 = {
        backgroundColor: '#eee',
    // tooltip : { // 提示框
    //     trigger : 'item',
    //     formatter : '{a}:{b}: {c}',
    // },
    visualMap: {
        show:false,
        max: 20,
        inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        }
    },
    xAxis3D: {
        name:'民族',
        type: 'category',
        data: xData3,
        axisLabel:{
            show:true,
            // margin:15,
            interval:0,//可控制坐标轴刻度标签的显示间隔，在类目轴中有效。
            formatter:"{value}"//自定义x轴显示数据标签格式
        },
    },
    yAxis3D: {
        name:'',
        type: 'category',
        data: yData3,
        axisLabel:{
            show:true,
            // margin:15,
            interval:0,//可控制坐标轴刻度标签的显示间隔，在类目轴中有效。
            formatter:"{value}"//自定义x轴显示数据标签格式
        },
    },
    zAxis3D: {
        name:'数量(个)',
        type: 'value',
        minInterval: 1
    },
    grid3D: {
        boxWidth: 100,
        boxDepth: 100,
        light: {
            main: {
                intensity: 1.2
            },
            ambient: {
                intensity: 0.3
            }
        }
    },
    series: [{
        type: 'bar3D',
        data: data3.map(function (item) {
            return {
                value: [item[0], item[1], item[2]]
            }
        }),
        shading: 'realistic',

        label: {
            // show: true,
            textStyle: {
                fontSize: 16,
                borderWidth: 1
            }
        },
        
        itemStyle: {
            opacity: 0.4
        },

        emphasis: {
            label: {
                textStyle: {
                    fontSize: 20,
                    color: '#900'
                }
            },
            itemStyle: {
                color: '#900'
            }
        }
    }]
};

if (option3 && typeof option3 === "object") {
    myChart3.setOption(option3, true);
}

</script>
{/block}